<script setup lang="ts">
import {ref, onMounted} from 'vue'

const searchInput = ref("")
const content = ref("")

function handleSelect(id) {
  GetContentDetailApi({"id": id}).then(res => {
    if (res.status === 200) {
      content.value = res.data.content
    }
  })
}

import {GetContentListApi, GetContentDetailApi} from "../api/mycontent"
import {ElMessage} from "element-plus";

const projectList = ref([])
const centerDialogVisible = ref(false)
onMounted(() => {
  const item = localStorage.getItem('token');
  if (item === null) {
    centerDialogVisible.value = true
  } else {
    GetContentListApi().then(res => {
      projectList.value = res.data
      if (res.data.length > 0) {
        content.value = res.data[0].content
      }
    })
  }
})

function notInputPassword() {
  centerDialogVisible.value = true
  ElMessage({message: '无权访问！', type: 'error'})
}

const password = ref("")

function postPassword() {
  if (password.value === "123456") {
    GetContentListApi().then(res => {
      projectList.value = res.data
      if (res.data.length > 0) {
        content.value = res.data[0].content
      }
    })
    centerDialogVisible.value = false
    localStorage.setItem('token', "1111");
  } else {
    ElMessage({message: '密码不正确！', type: 'error'})
  }
  return;
}
</script>
<template>
  <div class="main">
    <el-container>
      <el-header class="header">
        <div style="text-align: center;display: flex;align-content: center">
          <h2>笔记</h2>
        </div>
      </el-header>
      <el-container>
        <el-aside style="width: 12%">
          <el-menu @select="handleSelect" style="margin-top: 0.5%">
            <el-sub-menu style="height: 100vh;">
              <template #title>
                <div style="width: 100%;text-align: center;">
                  <label style="font-weight: bold;margin-left: 10%">文章列表</label>
                </div>
              </template>
              <el-menu-item-group>
                <el-menu-item :index="d.id" v-for="d in projectList">{{ d.title }}</el-menu-item>
              </el-menu-item-group>
            </el-sub-menu>
          </el-menu>
        </el-aside>
        <el-main style="padding: 5px;height: 100vh">
          <div style="background-color: white;margin-top: 0;height: 100vh">
            <v-md-preview :text="content" style="text-align: left"></v-md-preview>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
  <el-dialog v-model="centerDialogVisible" title="请输入访问密码" width="30vw" center :before-close="notInputPassword">
    <label>密码：</label>
    <el-input style="width: 20vw" v-model="password"></el-input>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="postPassword">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<style scoped>
.main {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background-color: whitesmoke;
  margin-top: 0.5%;
  height: 90%;
}

.header {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: white;
  position: static;
}

.left-side h2 {
  margin-left: 20vw;
}

.right-side .el-input {
  width: 200px;
}

.el-sub-menu .el-sub-menu__title {
  text-align: center;
}

.el-menu-item {
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

::v-deep(#one .el-icon) {
  display: none;
}

#bili-radio {
  width: 100%;
  height: 100%;
  border-radius: 6px;
}
</style>